<template>
  <div id="main">
    <div>
      <!-- 新增成员弹窗 -->
      <el-dialog title="选择成员" :visible.sync="member_dialogVisible">
        <div class="member_content">
          <div class="member_input">
            <!-- 查询输入框 -->
            <el-form :model="member_form">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input
                  v-model="member_form.member_name"
                  autocomplete="off"
                  placeholder="请选择"
                  style="width: 250px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="所属部门" :label-width="formLabelWidth">
                <el-select
                  v-model="member_form.department"
                  placeholder="请选择"
                  style="width: 250px"
                >
                  <el-option label="部门一" value="bumen_a"></el-option>
                  <el-option label="部门二" value="bumen_b"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <div class="member_btn" style="float: right; margin-bottom: 20px">
            <el-button type="primary">查询</el-button>
            <el-button type="primary">重置</el-button>
          </div>

          <div class="member_table">
            <el-table :data="member_table_data" border style="width: 100%">
              <el-table-column
                property="headPic"
                label="头像"
                width="100"
              ></el-table-column>
              <el-table-column
                property="name"
                label="姓名"
                width="100"
              ></el-table-column>
              <el-table-column
                property="phone"
                label="手机号"
                width="100"
              ></el-table-column>
              <el-table-column
                property="buMen"
                label="部门"
                width="100"
              ></el-table-column>
              <el-table-column
                property="depatment"
                label="岗位"
                width="100"
              ></el-table-column>
              <el-table-column property="todo" label="操作"></el-table-column>
            </el-table>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="member_dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="member_dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="考勤模板名称：">
          <el-input v-model="form.name" style="width: 270px"></el-input>
        </el-form-item>
        <el-form-item label="打卡范围：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上班时间：">
          <el-input v-model="form.start" style="width: 270px"></el-input>
        </el-form-item>
        <el-form-item label="下班时间：">
          <el-input v-model="form.end" style="width: 270px"></el-input>
        </el-form-item>

        <el-form-item label="工作日：">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="全选" name="type"></el-checkbox>
            <el-checkbox label="周一" name="type"></el-checkbox>
            <el-checkbox label="周二" name="type"></el-checkbox>
            <el-checkbox label="周三" name="type"></el-checkbox>
            <el-checkbox label="周四" name="type"></el-checkbox>
            <el-checkbox label="周五" name="type"></el-checkbox>
            <el-checkbox label="周六" name="type"></el-checkbox>
            <el-checkbox label="周日" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="备注：">
          <el-input
            type="textarea"
            v-model="form.desc"
            style="width: 300px"
            rows="5"
          ></el-input>
        </el-form-item>
        <p>适用成员</p>
        <button @click="member_dialogVisible = true" type="button">
          新增成员
        </button>

        <div>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="头像" width="120">
            </el-table-column>
            <el-table-column prop="province" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="city" label="手机号" width="120">
            </el-table-column>
            <el-table-column prop="address" label="项目角色" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="部门" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="岗位" width="120">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      member_form: {
        name: "",
        buMen: "",
      },
      formLabelWidth:20,
      member_table_data: [],
      member_dialogVisible: false,
      tableData: [],
      form: {
        name: "",
        region: "",

        type: [],
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    getGoodsDetail() {
      this.form.name = this.$route.query.name;
      console.log(this.$route.query.end);
      this.form.start = this.$route.query.start;
      this.form.end = this.$route.query.end;
    },
  },
  mounted() {
    this.getGoodsDetail();
  },
};
</script>
<style scoped>
#main {
  margin-left: 60px;
}
</style>